<template>
	<view>
		<view class="loading" v-if="loading">
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
		</view>
		<web-view src="/hybrid/html/anyWeb.html" @message="handlePostMessage"></web-view>
	</view>
</template>

<script>
	var wv; //计划创建的webview
	export default {
		data() {
			return {
				loading: true
			}
		},
		onReady() {
			var _this = this
			var currentWebview = this.$scope.$getAppWebview()
			wv = currentWebview.children()[0]
			wv.setStyle({
				top: 0,
				height: 1
			})
			wv.addEventListener("loaded", function() {
				_this.loading = false
				wv.setStyle({
					top: uni.getSystemInfoSync().statusBarHeight,
					height: '100%',
					width: '100%'
				})
			}, false);
		},
		methods: {
			handlePostMessage(data) {
				console.log('从H5端接受的数据', data);
				// 全局存储数据
				uni.setStorageSync('ANYWEBINFO', data.detail.data[0].anyWebInfo);
			}
		},
	}
</script>

<style scoped lang="scss">
	/* 设置位置 */
	.loading {
		position: absolute;
		/* 居中 */
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* 高度 */
		height: 40px;
		/* 弹性布局 */
		display: flex;
		/* 设置子项在y轴方向居中，应该是设置起点在中间，非常有用，不然动画很怪 */
		align-items: center;
	}

	/* 小竖条 */
	.item {
		height: 50px;
		background-color: $echo-main-color;
		width: 5px;
		/* 加margin，使竖条之间有空隙 */
		margin: 0px 3px;
		/* 圆角 */
		border-radius: 10px;
		/* 动画：名称、时间、循环 */
		animation: loading 1s infinite;
	}

	/* 设置动画 */
	@keyframes loading {
		0% {
			height: 0px;
		}

		50% {
			height: 50px;
		}

		100% {
			height: 0px;
		}
	}

	/* 为每一个竖条设置延时 */
	.item:nth-child(2) {
		animation-delay: 0.1s;
	}

	.item:nth-child(3) {
		animation-delay: 0.2s;
	}

	.item:nth-child(4) {
		animation-delay: 0.3s;
	}

	.item:nth-child(5) {
		animation-delay: 0.4s;
	}

	.item:nth-child(6) {
		animation-delay: 0.5s;
	}

	.item:nth-child(7) {
		animation-delay: 0.6s;
	}

	.item:nth-child(8) {
		animation-delay: 0.7s;
	}
</style>
